﻿<div [@routerTransition]>
    <div class="container">
        <div id="LoginArea" class="row">
            <div class="col-lg-12">
                <div class="well bs-component">
                    <form #loginForm="ngForm" id="LoginForm" class="form-horizontal" method="post" novalidate (ngSubmit)="login()">
                        <fieldset>
                            <legend>登录</legend>
                            <div class="form-group">
                                <div class="col-lg-12">
                                    <input [(ngModel)]="loginService.authenticateModel.userName" autoFocus class="form-control form-control-solid placeholder-no-fix input-ltr" type="text" autocomplete="off" placeholder="用户名/邮箱/手机号" name="userName" required />
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-12">
                                    <input [(ngModel)]="loginService.authenticateModel.password" class="form-control form-control-solid placeholder-no-fix input-ltr" type="password" autocomplete="off" placeholder="密码" name="password" required maxlength="32" />
                                    <div class="checkbox">
                                        <label>
                                            <input [(ngModel)]="loginService.rememberMe" type="checkbox" name="rememberMe" value="true" />
                                            <span class="ripple"></span>
                                            <span class="check"></span> 记住我
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="col-lg-12">
                                    <button id="LoginButton" type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid"><i class="fa fa-sign-in"></i> 登录</button>
                                    <span *ngIf="isSelfRegistrationAllowed" class="hide">
                                        <a class="btn btn-success" [routerLink]="['../register']"><i class="fa fa-sign-in"></i> {{l("Register")}}</a>
                                    </span>
                                </div>
                            </div>

                        </fieldset>
                    </form>

                    <div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
                        <h4>{{l("LoginWith")}}</h4>
                        <ul class="social-icons">
                            <li *ngFor="let provider of loginService.externalLoginProviders">
                                <a class="btn btn-default btn-sm fa fa-{{provider.icon == 'googleplus' ? 'google-plus' : provider.icon}}" (click)="externalLogin(provider)" title="{{provider.name}}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>